<script setup lang="ts">
import { onBeforeMount, reactive, inject, ref } from 'vue';
import axios from 'axios'
const BaseUrl = inject('BaseUrl') as string;
let userInfo: any;
let searchBy = ref('');
onBeforeMount(async () => {
    await axios.get(BaseUrl + '/vx/api/b/getUserInfo')
        .then(res => {
            userInfo = reactive(res.data.data);
        })
})
</script>

<template>
    <div class="content">
        <div class="header">用户信息管理</div>
        <div class="top">
            <div>
                <input v-model="searchBy" type="text">
                <button>搜索</button>
            </div>
            <button>不知道干嘛</button>
        </div>
        <div class="userInfo">
            <table>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>接种疫苗次数</th>
                </tr>
                <tr v-for="info in userInfo" :key="info.id">
                    <td>{{ info.id }}</td>
                    <td>{{ info.name }}</td>
                    <td>{{ info.age }}</td>
                    <td>{{ info.gender }}</td>
                    <td>{{ info.vaccine_times }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<style scoped lang="css">
.userInfo table {
    background-color: pink;
    flex: 1;
    text-align: left;
}

.userInfo {
    display: flex;
    padding-left: 5px;
    padding-right: 5px;
}


.userInfo table tr th,
.userInfo table tr td {
    width: 100px;
    padding: 10px;
    border: 1px solid #000;
}

.content {
    background-color: skyblue;
    margin-left: 10px;
    width: 100%;
    height: 100%;
}

.header {
    background-color: rgba(128, 128, 128, 0.5);
    color: #fff;
    padding: 15px;
}



.top {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 5px;
    background-color: orange;
}

.top button {
    margin-right: 10px;
}
</style>